<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif; /* 明确字体 */
            margin: 0;
            padding: 0;
            color: #333;
            line-height: 1.6;
            background-color: rgba(175, 197, 206, 0.5);
        }

        h1 {
            text-align: center;
            margin-top: 50px;
            box-shadow: 0px 15px 10px -15px #000;
            background-color: rgba(35, 97, 120, 0.5);
            border-radius: 16px;
            margin: 3em auto 2em auto;
            padding: 0.3em 1.4em;
            color: #f3f7fa;
            text-shadow: 0 0 10px #FFFFFF;
            font-weight: 200;
            font-size: 1.2em;
            font-family: 'FZFW ZhuZi A Old Mincho';
            display: block;
            width: fit-content;
        }
       .content {
        max-width: 50%;
        margin-left: 25%;
       }
        /* 按钮样式 */
       .nav-buttons {
            display: none;
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            margin: 20px 0;
            z-index: 1000;
            bottom: 20px;
            width: 60%;
        }

       .nav-buttons button {
            background-color: rgba(35, 97, 120, 0.8);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            margin: 0 10px;
            flex: 1;
        }

       .nav-buttons button:hover {
            background-color: rgba(25, 77, 90, 0.8);
        }

        /* 手机端适配样式 */
        @media (max-width: 600px) {
            h1 {
                margin-top: 30px;
                font-size: 1.2em;
            }
       .content {
        max-width: 100%;
        margin-left: 0;
       }


            p {
                font-size: 18px;
                text-indent: 2em;
            }

           .nav-buttons {
                width: 60%;
                justify-content: space-between;
            }

           .nav-buttons button {
                font-size: 14px;
                padding: 8px 10px;
                margin: 0 5px;
                flex: 1;
            }
        }


       .pictureDesc {
            text-indent: 0;
            font-size: 0.6em;
            text-align: center;
            color: #A8A8A8;
            margin-top: 0;
            margin-bottom: 0;
        }

        img {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: auto;
            text-align: center;
            margin-top: 0px;
        }



        /* 改变滚动条颜色 */
        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(175, 197, 206, 0);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(175, 197, 206, 0);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(175, 197, 206, 0);
        }

.sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 200px;
    height: 100%;
    background-color: #f9f9f9; /* 更柔和的背景色 */
    transition: left 0.3s ease-in-out;
    overflow-y: auto;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影增加立体感 */
}

.sidebar.open {
    left: 0;
}

/* 目录列表样式 */
.chapter-item {
    list-style-type: none;
    padding: 5px; /* 增加内边距 */
    width: 80%;
    margin: 5px auto;
    border-bottom: 1px solid #ddd; /* 底部边框增加分隔感 */
    transition: background-color 0.2s ease; /* 平滑的背景色过渡效果 */
}

.chapter-item:hover {
    background-color: #eaeaea;
}

.chapter-title {
    font-family: Arial, sans-serif;
    line-height: 1;
    list-style-type: none;
    font-weight: bold;
    color: #007bff; /* 更鲜艳的标题颜色 */
    font-size: 10px;
    margin: 4px 0;
    text-align: left;
}

.chapter-time {
    font-family: Arial, sans-serif;
    line-height: 1;
    list-style-type: none;
    font-weight: normal; /* 正常字体粗细 */
    margin: 4px 0;
    text-align: left;
    font-size: 8px;
    color: #888;
}

/* 提示没有内容的样式 */
.no-chapters {
    text-align: center;
    font-size: 16px;
    color: #888;
}

.current-chapter {
    background-color: #c7e0f4; /* 当前章节的突出背景色 */
    font-weight: bold; /* 加粗当前章节 */
}

    </style>
</head>

<body>

    <h1>{{ title }}</h1>
    <div class="content" onclick="toggleNavButtons()">{{ content | safe }}</div>

    <div class="nav-buttons" id="navButtons">
        <button onclick="goToPreviousChapter()">上一章</button>
        <button onclick="goToTableOfContents()">目录</button>
        <button onclick="goToNextChapter()">下一章</button>
    </div>
    <div class="sidebar" id="sidebar">
        <!-- 目录列表将在这里填充 -->
    </div>

    <script>
        let navVisible = false;
        let sidebarVisible = false;
        let currentChapterId = '{{ item_id }}';
        let currentItems = null;

        // 切换按钮显示/隐藏
        function toggleNavButtons() {
            const navButtons = document.getElementById('navButtons');
            navVisible =!navVisible;
            navButtons.style.display = navVisible? 'block' : 'none';
        }

        // 请求章节目录数据并填充
        function fetchChapterList() {
            fetch('/detail?bookId={{ book_id }}')
               .then(response => response.json())
               .then(data => {
                    const chapters = data.data.chapterListWithVolume;
                    currentItems = chapters;
                    const sidebar = document.getElementById('sidebar');
                    sidebar.innerHTML = '';

                    // 检查是否有章节内容
                    if (chapters.length === 0) {
                        const noChaptersMessage = document.createElement('div');
                        noChaptersMessage.className = 'no-chapters';
                        noChaptersMessage.textContent = '暂无章节';
                        sidebar.appendChild(noChaptersMessage);
                        return;
                    }

                    // 循环生成章节列表
                    chapters.forEach(volume => {
                        volume.forEach(chapter => {
                            const chapterItem = document.createElement('div');
                            chapterItem.className = 'chapter-item';

                            const chapterTitle = document.createElement('div');
                            chapterTitle.className = 'chapter-title';
                            chapterTitle.textContent = chapter.title;

                            const chapterTime = document.createElement('div');
                            chapterTime.className = 'chapter-time';
                            chapterTime.textContent = chapter.firstPassTime;

                            chapterItem.appendChild(chapterTitle);
                            chapterItem.appendChild(chapterTime);

                            chapterItem.onclick = () => {
                                goToChapter(chapter.itemId);
                            };

                            // 判断是否为当前章节
                            if (chapter.itemId === currentChapterId) {
                                chapterItem.classList.add('current-chapter');
                            }

                            sidebar.appendChild(chapterItem);
                        });
                    });

                    // 滚动到当前章节在目录中的位置
                    const currentChapterItem = sidebar.querySelector('.current-chapter');
                    if (currentChapterItem) {
                        sidebar.scrollTop = currentChapterItem.offsetTop - sidebar.offsetTop - sidebar.clientHeight / 2;
                    }
                })
               .catch(error => console.error('Error fetching chapter list:', error));
        }

        // 跳转到对应章节
        function goToChapter(chapterId) {
            currentChapterId = chapterId;
            window.location.href = `/online_reader?book_id={{ book_id }}&item_id=${chapterId}`;
        }

        // 上一章
        function goToPreviousChapter() {
            // 根据当前章节 ID 计算上一章的 ID
            if (currentChapterId) {
                const prevChapterId = calculatePreviousChapterId();
                if (prevChapterId) {
                    goToChapter(prevChapterId);
                }
            }
        }

        function calculatePreviousChapterId() {
            const chapters = currentItems;
            let found = false;
            for (let subArray of chapters) {
                for (let i = subArray.length - 1; i >= 0; i--) {
                    if (subArray[i].itemId === currentChapterId) {
                        found = true;
                        if (i > 0) {
                            return subArray[i - 1].itemId;
                        } else {
                            // 如果当前是第一个章节，可能需要特殊处理，这里暂时返回 null
                            return null;
                        }
                    }
                }
            }
            // 如果没有找到对应的章节 ID，也可以根据需求进行特殊处理，这里暂时返回 null
            return null;
        }

        // 下一章
        function goToNextChapter() {
            // 根据当前章节 ID 计算下一章的 ID
            if (currentChapterId) {
                const nextChapterId = calculateNextChapterId(currentChapterId);
                if (nextChapterId) {
                    goToChapter(nextChapterId);
                }
            }
        }

        function calculateNextChapterId(ChapterId) {
            const chapters = currentItems;
            let found = false;
            for (const subArray of chapters) {
                for (const item of subArray) {
                    if (found) {
                        return item.itemId;
                    }
                    if (item.itemId === ChapterId) {
                        found = true;
                    }
                }
            }
            return null;
        }

        // 切换目录侧边栏显示/隐藏
        function goToTableOfContents() {
            const sidebar = document.getElementById('sidebar');
            sidebarVisible =!sidebarVisible;
            sidebar.classList.toggle('open', sidebarVisible);
        }

        // 点击非按钮区域隐藏目录
        document.body.addEventListener('click', function (e) {
            if (!e.target.closest('.nav-buttons') && sidebarVisible &&!e.target.closest('.sidebar')) {
                goToTableOfContents();
            }
        });

        // 进入页面请求章节目录
        document.addEventListener('DOMContentLoaded', function () {
            fetchChapterList();
        });
    </script>

</body>

</html>